<template>
  <div class="head-nav">
    <div class="image">
      <img src="../assets/logo.png" alt="" />
    </div>
    <p class="admain">XXX主持人团队 后台管理</p>
    <p class="login">
      你好，{{ name }}
      <span @click="loginHandle" class="login-btn">退出</span>
    </p>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "HeadNav",
  computed: {
    //引用模块里的数据
    ...mapState("admain", {
      name: (state) => state.admainName,
    }),
  },
  methods: {
    //引用模块里的方法
    ...mapMutations("admain", ["setAdmainName"]),
    loginHandle() {
      //清空仓库
      this.setAdmainName("");
      //清空本地存储
      localStorage.removeItem("admainName");
      //提示退出成功
      this.$message({
        message: "退出成功",
        type: "info",
        duration: "1500",
      });
      //跳转到登录页面
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.head-nav {
  padding: 20px 30px;
  height: 70px;
  line-height: 70px;
  overflow: hidden;
  background: #c4b4a8;

  .image {
    float: left;
    margin-right: 10px;
    margin-top: -20px;
  }

  .admain {
    float: left;
    font-weight: 700;
    margin-left: 20px;
  }

  .login {
    float: right;

    .login-btn {
      margin-left: 20px;
      text-decoration: underline;
      color: #000;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>>

